<h3>Loading Spinners</h3>
<h4 class="page-header">Loaders.css
   <small class="text-muted">Delightful and performance-focused pure css loading animations.</small>
</h4>
<div class="row">
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Pulse</div>
         <div class="panel-body loader-demo">
            <div class="ball-pulse">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Grid Pulse</div>
         <div class="panel-body loader-demo">
            <div class="ball-grid-pulse">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Clip Rotate</div>
         <div class="panel-body loader-demo">
            <div class="ball-clip-rotate">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Clip Rotate Pul</div>
         <div class="panel-body loader-demo">
            <div class="ball-clip-rotate-pulse">
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Square Spin</div>
         <div class="panel-body loader-demo">
            <div class="square-spin">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Clip Rotate Mul</div>
         <div class="panel-body loader-demo">
            <div class="ball-clip-rotate-multiple">
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Pulse Rise</div>
         <div class="panel-body loader-demo">
            <div class="ball-pulse-rise">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Rotate</div>
         <div class="panel-body loader-demo">
            <div class="ball-rotate">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Cube Transition</div>
         <div class="panel-body loader-demo">
            <div class="cube-transition">
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Zig Zag</div>
         <div class="panel-body loader-demo">
            <div class="ball-zig-zag">
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Zig Zag Deflect</div>
         <div class="panel-body loader-demo">
            <div class="ball-zig-zag-deflect">
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Triangle Path</div>
         <div class="panel-body loader-demo">
            <div class="ball-triangle-path">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Scale</div>
         <div class="panel-body loader-demo">
            <div class="ball-scale">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Line Scale</div>
         <div class="panel-body loader-demo">
            <div class="line-scale">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Line Scale Party</div>
         <div class="panel-body loader-demo">
            <div class="line-scale-party">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Scale Multiple</div>
         <div class="panel-body loader-demo">
            <div class="ball-scale-multiple">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Pulse Sync</div>
         <div class="panel-body loader-demo">
            <div class="ball-pulse-sync">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Beat</div>
         <div class="panel-body loader-demo">
            <div class="ball-beat">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Line Scale Pulse Out</div>
         <div class="panel-body loader-demo">
            <div class="line-scale-pulse-out">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Line Scale Pulse Out</div>
         <div class="panel-body loader-demo">
            <div class="line-scale-pulse-out-rapid">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Scale Ripple</div>
         <div class="panel-body loader-demo">
            <div class="ball-scale-ripple">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Scale Ripple Mu</div>
         <div class="panel-body loader-demo">
            <div class="ball-scale-ripple-multiple">
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Spin Fade Loade</div>
         <div class="panel-body loader-demo">
            <div class="ball-spin-fade-loader">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Line Spin Fade Loade</div>
         <div class="panel-body loader-demo">
            <div class="line-spin-fade-loader">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Triangle Skew Spin</div>
         <div class="panel-body loader-demo">
            <div class="triangle-skew-spin">
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Pacman</div>
         <div class="panel-body loader-demo">
            <div class="pacman">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Ball Grid Beat</div>
         <div class="panel-body loader-demo">
            <div class="ball-grid-beat">
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">Semi Circle Spin</div>
         <div class="panel-body loader-demo">
            <div class="semi-circle-spin">
               <div></div>
            </div>
         </div>
      </div>
   </div>
</div>
<h4 class="page-header">Spin Kit</h4>
<div class="row">
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Rotating plane</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-rotating-plane"></div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Double bounce</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-double-bounce">
               <div class="sk-double-bounce1"></div>
               <div class="sk-double-bounce2"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Wave</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-wave">
               <div class="sk-rect1"></div>
               <div class="sk-rect2"></div>
               <div class="sk-rect3"></div>
               <div class="sk-rect4"></div>
               <div class="sk-rect5"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Wandering cubes</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-wandering-cubes">
               <div class="sk-cube1"></div>
               <div class="sk-cube2"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-4">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Pulse</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-pulse"></div>
         </div>
      </div>
   </div>
   <div class="col-md-4">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Chasing dots</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-chasing-dots">
               <div class="sk-dot1"></div>
               <div class="sk-dot2"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-4">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Three bounce</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-three-bounce">
               <div class="sk-bounce1"></div>
               <div class="sk-bounce2"></div>
               <div class="sk-bounce3"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Circle</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-circle">
               <div class="sk-circle1 sk-circle"></div>
               <div class="sk-circle2 sk-circle"></div>
               <div class="sk-circle3 sk-circle"></div>
               <div class="sk-circle4 sk-circle"></div>
               <div class="sk-circle5 sk-circle"></div>
               <div class="sk-circle6 sk-circle"></div>
               <div class="sk-circle7 sk-circle"></div>
               <div class="sk-circle8 sk-circle"></div>
               <div class="sk-circle9 sk-circle"></div>
               <div class="sk-circle10 sk-circle"></div>
               <div class="sk-circle11 sk-circle"></div>
               <div class="sk-circle12 sk-circle"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Cube grid</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-cube-grid">
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
               <div class="sk-cube"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Fading circle</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-fading-circle">
               <div class="sk-circle1 sk-circle"></div>
               <div class="sk-circle2 sk-circle"></div>
               <div class="sk-circle3 sk-circle"></div>
               <div class="sk-circle4 sk-circle"></div>
               <div class="sk-circle5 sk-circle"></div>
               <div class="sk-circle6 sk-circle"></div>
               <div class="sk-circle7 sk-circle"></div>
               <div class="sk-circle8 sk-circle"></div>
               <div class="sk-circle9 sk-circle"></div>
               <div class="sk-circle10 sk-circle"></div>
               <div class="sk-circle11 sk-circle"></div>
               <div class="sk-circle12 sk-circle"></div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-3">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h5>Spinner Wordpress</h5>
         </div>
         <div class="panel-body loader-demo">
            <div class="sk-spinner sk-spinner-wordpress">
               <span class="sk-inner-circle"></span>
            </div>
         </div>
      </div>
   </div>
</div>
<h4 class="page-header">Whirl Loaders
   <small class="text-muted">Based on modern CSS3 animations and ready to be used in Panels</small>
</h4>
<!-- START row-->
<div class="row">
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">standard</div>
         <div class="panel-body whirl standard">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">traditional</div>
         <div class="panel-body whirl traditional">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">double-up</div>
         <div class="panel-body whirl double-up">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">duo</div>
         <div class="panel-body whirl duo">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">blade</div>
         <div class="panel-body whirl blade">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">ringed</div>
         <div class="panel-body whirl ringed">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">helicopter</div>
         <div class="panel-body whirl helicopter">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">line</div>
         <div class="panel-body whirl line">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">line grow</div>
         <div class="panel-body whirl line grow">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">line back-and-forth</div>
         <div class="panel-body whirl line back-and-forth">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">line back-and-forth grow</div>
         <div class="panel-body whirl line back-and-forth grow">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">sphere</div>
         <div class="panel-body whirl sphere">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">sphere vertical</div>
         <div class="panel-body whirl sphere vertical">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">bar</div>
         <div class="panel-body whirl bar">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">bar follow</div>
         <div class="panel-body whirl bar follow">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">shadow</div>
         <div class="panel-body whirl shadow">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">shadow oval</div>
         <div class="panel-body whirl shadow oval">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">shadow oval right</div>
         <div class="panel-body whirl shadow oval right">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
   <div class="col-md-3">
      <!-- START panel-->
      <div class="panel panel-default">
         <div class="panel-heading">no-overlay</div>
         <div class="panel-body whirl no-overlay">
            <p>Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo.</p>
         </div>
      </div>
      <!-- END panel-->
   </div>
</div>
<!-- END row-->